<template>
	<view class="control">
		<view class="con-1">
			<nav-bar title="卡务记录" color="white" bg="rgba(0,0,0,0)"></nav-bar>
			<view class="bg">
				<view class="address">
					<view class="flex-space-between">
						<view class="flex-align">
							<van-image v-if="itemChooselist.venue_thumb != ''" width="74rpx" height="74rpx" radius="2"
								style="margin-right: 10rpx;" :src="itemChooselist.venue_thumb" />

							<van-image v-else width="74rpx" height="74rpx" radius="10rpx" fit="cover"
								style="margin-right: 10rpx;" src="https://img.yzcdn.cn/vant/cat.jpeg" />
							<view>
								<view class="address-name">{{itemChooselist.venue_name}}</view>
								<view class="address-desc">地址:{{itemChooselist.address}}</view>
							</view>
						</view>
						<view class="exchange flex-center flex-column " @click="show = true">
							<van-icon name="exchange" size="16" />
							切换
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="dateslist">
			<van-row class="dates text-center">
				<van-col v-for="item in datelist" :key="item.panel" :span="12" >
					<view class="date-item" :class="{ active: dateActives === item.panel }" @click="dataslists(item)">
						{{ item.label }}
					</view>
				</van-col>
			</van-row>
		</view> -->
		<view class="dateslists">
			<van-row class="dates text-center">
				<van-col v-for="item in dates" :key="item.value" :span="6">
					<view class="date-item" :class="{ active: dateActive === item.value }" @click="dataslist(item)">
						{{ item.label }}
					</view>
				</van-col>
			</van-row>
		</view>

		<!-- <view class="con-2 flex-space-between">
			<view class="flex-center">
				<view class="flex-center" @click="openTime(0)">
					{{selectTime.startTime}}
					<image mode="aspectFit"	src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/63f4a944e2c855ceddefa48e7aa384d11f45f23b.png" />

				</view>
				<view style="margin: 0px 10rpx;">至</view>
				<view class="flex-center" @click="openTime(1)">
					{{selectTime.endTime}}
					<image mode="aspectFit"	src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/63f4a944e2c855ceddefa48e7aa384d11f45f23b.png" />
				</view>
			</view>
			<view class="flex-center">
				操作级别
				<image mode="aspectFit"	src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/63f4a944e2c855ceddefa48e7aa384d11f45f23b.png" />
			</view>
		</view> -->
		<view class="con-3 ">
			<!-- <text>衡阳奥星-文弱</text>
			<van-tag round color="rgba(15, 15, 15, 0.6)" text-color="rgb(234,248,248)" size="mini">
				<image mode="aspectFit" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/c98147533bea4c8c4e93df98ded244914545eb82.png" />
				切换
			</van-tag> -->
			<view class="top">
				<view class="flex-between">
					<u-search @search="search" @custom="search" placeholder="支持输入关键字进行筛选查询" :showAction="false"
						v-model="searchKey"></u-search>
					<!-- <view :class="[
            { 'checked-address flex-align': address.name != undefined },
            { 'adress flex-align': address.name == undefined },
          ]" @click="openAdress">
					<text>{{ address.name || "筛选" }}</text>
					<u-icon name="list-dot" color="#000" size="15" v-if="address.name == undefined"></u-icon>
					<u-icon name="list-dot" color="#2F75FA" size="15" v-if="address.name != undefined"></u-icon>
				</view> -->
				</view>
			</view>
		</view>

		<view class="con-4 ">
			<view class="con-item con_col" v-for="item in list" :key="item" @click="href"
				:style="{ borderLeft: getBorderColor(item.op_level) }">
				<!-- <view class="con_col2" v-if="item.log_level == 1">
				</view>
				<view class="con_col1" v-if="item.log_level == 2">
				</view>
				<view class="con_col" v-if="item.log_level == 3">
				</view> -->
				<view>
					<view class="flex-space-between ">
						<view class="item-1">{{item.t || ''}}
							<text style="color: red;">({{item.op_level || ''}})</text>
						</view>
						<view class="item-4" style="display: flex;flex-direction: row;align-items: center; ">
							<image style="width: 30rpx;height: 30rpx;border-radius: 50% 50%;" :src="item.user_info.head_pic" mode=""></image>
							<view class="">
								{{item.user_info.username}}
							</view>
							<view class="">
								{{item.user_info.phone}}
							</view>
						</view>
					</view>
					<!-- <view class="item-1">{{item.action}}</view> -->
					<view class="item-2">
						<view>{{item.content || ''}}</view>
					</view>
				</view>
				<view class="flex-space-between ">
					<view class="item-3">{{item.name || ''}}-{{item.optioner || ''}}</view>
					<view class="item-4">{{item.create_at || ''}}</view>
				</view>
			</view>
		</view>
		<view class="" style="width: 100%; height: 20rpx;">

		</view>
		<van-popup :show="showTime" round position="bottom" @close="showTime = false">
			<van-datetime-picker type="date" :value="currentDate" @confirm="configTime" :min-date="minDate" />
		</van-popup>
		<van-popup closeable :show="show" round position="bottom" @close="show = false">
			<view class="good-box">
				<view class="title">
					切换场馆
				</view>
				<!-- <view class="good-list">
					<van-radio-group :value="radio" @change="onChange">
						<view class="good-item" v-for="(item,index) in venuelist" :key="index">
							<van-radio :name="index" :value="index" color="#2f75fa"
								:checked="index == 0 ? true : false">
								<view class="flex-align">
									<van-image width="124rpx" height="124rpx" radius="10rpx" fit="cover"
										v-if="item.venue_thumb != ''" :src="item.venue_thumb" />
									<van-image v-else width="124rpx" height="124rpx" radius="10rpx" fit="cover"
										src="https://img.yzcdn.cn/vant/cat.jpeg" />
									<view class="info">
										<view class="name">{{item.venue_name}}</view>
										<view class="flex-align" v-if="item.project_list != ''">
											<view class="tag" v-if="item.project_list[0].name != ''">
												{{item.project_list[0].name}}</view>
											<view class="tag" v-if="item.project_list[1].name != ''">
												{{item.project_list[1].name}}</view>
											<view class="tag" v-if="item.project_list[2].name != ''">
												{{item.project_list[2].name}}</view>
										</view>
										<view class="address">{{item.address}}</view>
									</view>
								</view>
							</van-radio>
						</view>
					</van-radio-group>
				</view> -->
				<view class="good-list">
					<view class="good-item" v-for="(item,index) in venuelist" :key="index" @click="onChangelist(item)">
						<view class="flex-align">
							<van-image width="124rpx" height="124rpx" radius="10rpx" fit="cover"
								v-if="item.venue_thumb != ''" :src="item.venue_thumb" />
							<van-image v-else width="124rpx" height="124rpx" radius="10rpx" fit="cover"
								src="https://img.yzcdn.cn/vant/cat.jpeg" />
							<view class="info">
								<view class="name">{{item.venue_name}}</view>
								<view class="flex-align" v-if="item.project_list != ''">
									<view class="tag" v-if="item.project_list[0].name != ''">
										{{item.project_list[0].name}}
									</view>
									<view class="tag" v-if="item.project_list[1].name != '' && item.project_list[1]">
										{{item.project_list[1].name}}
									</view>
									<view class="tag" v-if="item.project_list[2].name != ''&& item.project_list[2]">
										{{item.project_list[2].name}}
									</view>
								</view>
								<view class="address">{{item.address}}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="footer">
					<view class="btn" @click="queren">确认</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	const personal = require("@/api/personal/index.js");
	import navbar from '@/mixins/navbar.js';
	import {
		formatDate
	} from "@/utils/util.js"
	export default {
		mixins: [navbar({
			navBarColor: '#fff'
		})],
		data() {
			return {
				showTime: false,
				currentDate: new Date().getTime(),
				minDate: new Date().getTime(),
				selectTime: {
					startTime: formatDate(new Date().getTime(), "YYYY/MM/DD"),
					endTime: formatDate(new Date().getTime(), "YYYY/MM/DD"),
				},
				status: 0, // 0选择开始时间，1结束时间
				searchKey: "", //搜索关键词
				show: false,
				venuelist: [], //场馆列表
				itemChoose: {}, // 场馆数据
				itemChooselist: {}, // 场馆数据
				dates: [{
						label: '今日',
						value: '5'
					},
					{
						label: '本周',
						value: '6'
					},
					{
						label: '本月',
						value: '7'
					},
					{
						label: '本年',
						value: '8'
					},
				],
				dateActive: '5',
				datelist: [{
						label: '卡务记录',
						panel: '2'
					},
					{
						label: '系统日志',
						panel: '1'
					},
				],
				dateActives: '2',
				nac: '5',
				listQuery: { //分页
					pageNo: 1,
					pageSize: 10,
				},
				totalPage: '', //几页
				list: []
			}
		},
		onLoad() {
			if (uni.getStorageSync("entry_name") == '') {
				uni.showToast({
					title: '请登录！',
					icon: 'exception',
					duration: 850
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/my-center/my-center'
					})
				}, 1000);
			}
			var data = uni.getStorageSync("wqzdy");
			var items = JSON.parse(data)
			this.venuelist = items
			this.itemChooselist = this.venuelist[0]
			this.op_log()
		},
		methods: {
			getBorderColor(opLevel) {
				switch (opLevel) {
					case "高":
						return "3px solid green"; // 假设高对应的颜色为绿色
					case "中":
						return "3px solid orange"; // 假设中对应的颜色为橙色
					case "低":
						return "3px solid red"; // 假设低对应的颜色为红色
					default:
						return "3px solid gray"; // 默认颜色
				}
			},
			async op_log() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.list = [];
				let params = {
					venue_id: this.itemChooselist.id,
					sourceTab: this.nac,
					search: this.searchKey,
					page: this.listQuery.pageNo,
					pageSize: this.listQuery.pageSize,
				};
				let res = await personal.getCardRecords(params);
				if (res.code == 1) {
					that.list = that.list.concat(res.data.data); //将数据拼接在一起
					that.totalPage = res.data.last_page
				}
			},
			onReachBottom() {
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.op_log()
			},
			dataslists(item) {
				this.listQuery.pageNo = 1
				this.list = []
				this.panel_s = ''
				this.dateActives = item.panel
				this.panel_s = item.panel
				this.member()
			},
			dataslist(item) {
				this.dateActive = item.value
				this.nac = item.value
				this.listQuery.pageNo = 1;
				this.list = [];
				this.op_log()
			},
			// 选择场馆
			onChange(e) {
				let that = this
				let i = e.detail
				const item = this.venuelist[i]
				if (item) {
					this.itemChoose = item
					this.venuelist[i].checked = true
				} else {
					this.itemChoose = {}
				}
			},
			onChangelist(item) {
				this.itemChoose = item
				this.itemChooselist = this.itemChoose
				this.show = false
				this.showlist = true
				this.nac = this.nac
				this.dateActive = this.dateActive
				this.op_log()
			},
			// 确认按钮
			queren() {
				this.itemChooselist = this.itemChoose
				this.show = false
				this.showlist = true
				this.nac = this.nac
				this.dateActive = this.dateActive
				this.op_log()
			},
			// 确认按钮
			// queren() {
			// 	this.itemChooselist = this.itemChoose
			// 	this.show = false
			// 	this.op_log()
			// },
			configTime(event) {
				let time = formatDate(event.detail)
				if (this.status === 0) {
					this.selectTime.startTime = formatDate(time, "YYYY/MM/DD")
				} else {
					this.selectTime.endTime = formatDate(time, "YYYY/MM/DD")
				}
				this.showTime = false
			},
			openTime(index) {
				this.status = index
				this.showTime = true
			},
			href() {
				// uni.navigateTo({
				// 	url: "/page_admin/system-log/log-detail"
				// })
			},
			search(val) {
				this.searchKey = val
				this.listQuery.pageNo = 1;
				this.list = [];
				this.op_log();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: rgb(243, 243, 243);

		.dateslist {
			position: fixed;
			z-index: 9;
			top: 300rpx;
			width: 100%;
			height: 100rpx;
			background-color: #ffffff;
			line-height: 100rpx;

			.dates {
				// padding: 0 30rpx;
				// margin-top: 80rpx;
				color: rgb(136, 136, 136);
				font-size: 28rpx;


				.date-item {
					// padding: 30rpx 0;
					font-weight: 700;
				}

				.active {
					color: rgb(51, 51, 51);
				}
			}
		}

		.dateslists {
			position: fixed;
			z-index: 9;
			top: 300rpx;
			width: 100%;
			height: 100rpx;
			background-color: #ffffff;
			line-height: 100rpx;

			.dates {
				// padding: 0 30rpx;
				// margin-top: 80rpx;
				color: rgb(180, 180, 180);
				font-size: 28rpx;


				.date-item {
					// padding: 30rpx 0;
					font-weight: 700;
				}

				.active {
					color: #000
				}
			}
		}

		/deep/ .good-box {
			height: 60vh;
			padding: 0px 30rpx;
			display: flex;
			flex-direction: column;

			.title {
				color: #000;
				font-size: 30rpx;
				font-weight: 700;
				margin-top: 40rpx;
			}

			.van-radio__label {
				line-height: inherit;
			}

			.good-list {
				flex: 1;
				height: 0;
				overflow: auto;

				.good-item {
					margin-top: 30rpx;

					.info {
						margin-left: 25rpx;

						.address {
							color: #fff;
							padding-top: 20rpx;
							padding-right: 30rpx;
							height: 70rpx;

							&-name {
								font-size: 34rpx;
								font-weight: 700;
								line-height: 34rpx;
							}

							&-desc {
								margin-top: 18rpx;
								font-size: 22rpx;
								line-height: 22rpx;
							}

							.exchange {
								width: 100rpx;
								height: 100rpx;
								border-radius: 50%;
								background-color: rgba(0, 0, 0, 0.2);
								color: rgb(234, 248, 248);
								font-size: 24rpx;
							}
						}

						.name {
							color: rgb(51, 51, 51);
							font-size: 30rpx;
							font-weight: 500;
							margin-bottom: 10rpx;
						}


						.tag {
							color: rgb(4, 179, 90);
							font-size: 24rpx;
							font-weight: 500;
							padding: 0px 10rpx;
							margin-right: 20rpx;
							background-color: rgba(4, 179, 90, 0.2);
							border-radius: 4rpx;

							&:nth-of-type(2) {
								color: rgb(236, 70, 246);
								background-color: rgba(236, 70, 246, 0.2);
							}
						}

						.address {
							margin-top: 10rpx;
							color: rgb(136, 136, 136);
							font-size: 22rpx;
						}
					}

				}
			}

			.footer {
				padding: 20rpx 0;
				background-color: rgb(255, 255, 255);

				.btn {
					color: rgb(255, 255, 255);
					font-size: 30rpx;
					font-weight: 700;
					padding: 20rpx 0;
					text-align: center;
					background-image: linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%);
					border-radius: 60rpx;
				}
			}
		}

		.top {
			padding: 0px 30rpx;
			padding-top: 20rpx;
			padding-bottom: 40rpx;
			background-color: white;
			width: 100%;

			.adress {
				margin-left: 30rpx;
				font-size: 28rpx;
				color: #000;
			}

			.checked-address {
				margin-left: 30rpx;
				font-size: 28rpx;
				color: #2f75fa;
			}

			.top-menu-list {
				display: flex;
				flex-wrap: wrap;

				.top-menu-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 20%;
					margin-top: 30rpx;
					padding: 0px 30rpx;
					box-sizing: border-box;
					font-size: 25rpx;

					.add_na {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 20%;
						// margin-top: 30rpx;
						padding: 0px 30rpx;
						box-sizing: border-box;
						font-size: 25rpx;

						.menu-image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 37rpx;
							background: rgb(250, 237, 234);
							background: linear-gradient(45deg,
									rgba(250, 237, 234, 1) 0%,
									rgba(246, 227, 216, 1) 77%);
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 60rpx;
								height: 60rpx;
							}
						}

						.menu-image-no-checked {
							width: 100rpx;
							height: 100rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 60rpx;
								height: 60rpx;
							}
						}

						.no-checked-text {
							margin-top: 20rpx;
							white-space: nowrap;
						}

						.checked-text {
							margin-top: 20rpx;
							white-space: nowrap;
							font-weight: bold;
						}
					}
				}
			}
		}

		.con-1 {
			width: 100%;
			position: relative;

			/deep/ .nav-bar {
				position: fixed;
				z-index: 999;
			}

			.bg {
				width: 100%;
				height: 300rpx;
				background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/5d1ccc3b7ac6cc185130c88a8ac2e90b1eeba707.png");
				background-size: 100%;
				background-position: 50% 80%;
				position: fixed;
				z-index: 9;

				.address {
					color: #fff;
					padding-top: 190rpx;
					padding-right: 30rpx;
					padding-left: 30rpx;
					height: 150rpx;

					&-name {
						font-size: 34rpx;
						font-weight: 700;
						line-height: 34rpx;
					}

					&-desc {
						margin-top: 18rpx;
						font-size: 22rpx;
						line-height: 22rpx;
					}

					.exchange {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						background-color: rgba(0, 0, 0, 0.2);
						color: rgb(234, 248, 248);
						font-size: 24rpx;
					}
				}
			}
		}


		.con-2 {
			width: 100%;
			padding: 29rpx 29rpx 30rpx;
			background-color: rgb(255, 255, 255);
			color: rgb(51, 51, 51);
			font-size: 28rpx;
			font-weight: 700;
			box-sizing: border-box;

			image {
				width: 20rpx;
				height: 10rpx;
				margin: 0 6rpx;
			}
		}

		.con-3 {
			// padding: 29rpx 29rpx 30rpx;
			display: flex;
			align-items: center;
			margin-top: 70rpx;
			position: fixed;
			top: 300rpx;
			width: 100%;
			padding: 29rpx 0rpx 30rpx;
			z-index: 99;

			text {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 700;
				margin-right: 20rpx;
			}

			/deep/ .van-tag {
				transform: translateY(-3rpx);
			}

			image {
				width: 25rpx;
				height: 23rpx;
				margin-right: 10rpx;
				margin-left: 10rpx;
			}
		}

		.con-4 {
			flex: 1;
			padding: 0rpx 30rpx;
			margin-top: 300rpx;
			margin-bottom: 40rpx;
			// overflow-y: auto;

			.con-item {
				margin-bottom: 30rpx;
				display: flex;
				min-height: 280rpx;
				flex-direction: column;
				padding: 30rpx 30rpx;
				justify-content: space-between;
				background-color: rgb(255, 255, 255);
				box-shadow: 0px 0px 16.02rpx 1.98rpx rgba(4, 0, 0, 0.05);
				border-radius: 10rpx;
				position: relative;
				top: 250rpx;

				.con_col {
					content: '';
					display: block;
					position: absolute;
					width: 10rpx;
					height: 100%;
					left: 0;
					top: 0;
					background-color: rgb(255, 0, 0);
					box-shadow: 4rpx 0px 7.6rpx 0.4rpx rgba(255, 0, 0, 0.22);
				}

				.con_col1 {
					content: '';
					display: block;
					position: absolute;
					width: 10rpx;
					height: 100%;
					left: 0;
					top: 0;
					background-color: rgb(99, 93, 247);
					box-shadow: 4rpx 0px 7.6rpx 0.4rpx rgba(99, 93, 247, 0.22);
				}

				.con_col2 {
					content: '';
					display: block;
					position: absolute;
					width: 10rpx;
					height: 100%;
					left: 0;
					top: 0;
					background-color: rgb(255, 170, 0);
					box-shadow: 4rpx 0px 7.6rpx 0.4rpx rgba(156, 171, 78, 0.2);
				}

				// &::before {
				// 	content: '';
				// 	display: block;
				// 	position: absolute;
				// 	width: 10rpx;
				// 	height: 100%;
				// 	left: 0;
				// 	top: 0;
				// 	background-color: rgb(255, 0, 0);
				// 	box-shadow: 4rpx 0px 7.6rpx 0.4rpx rgba(255, 0, 0, 0.22);
				// }

				// &:nth-of-type(2n):before {
				// 	background-color: rgb(99, 93, 247);
				// 	box-shadow: 4rpx 0px 7.6rpx 0.4rpx rgba(99, 93, 247, 0.22);
				// }

				// &:nth-of-type(3n):before {
				// 	background-color: rgb(255, 170, 0);
				// 	box-shadow: 4rpx 0px 7.6rpx 0.4rpx rgba(99, 93, 247, 0.22);
				// }

				.item-1 {
					color: rgb(0, 0, 0);
					font-size: 26rpx;
					font-weight: 700;
				}

				.item-2 {
					margin-top: 31rpx;
					display: flex;
					flex-wrap: wrap;

					view {
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						font-weight: 500;
						margin-right: 20rpx;
					}
				}

				.item-3 {
					color: rgb(102, 102, 102);
					font-size: 26rpx;
					font-weight: 500;
				}

				.item-4 {
					color: rgb(102, 102, 102);
					font-size: 26rpx;
					font-weight: 700;
				}
			}
		}
	}
</style>